require(['./config'], () => {
    require(['template', 'url','header', 'footer','float-box'], ( template, url,) => {
        class Shop {
            constructor () {
                this.list()
                this.render()
                this.calcTotalMoney ()
                this.checksChange ()
                this.setAllCheckStatus ()
                this.calcTotalNum()
                this.delete()
                this.addbtn()
                this.reduce()
                this.incomplete()

            }
            list () {
                $.get(url.rap2 + '/api/index/list', resp => {
                    if (resp.code === 200) {
                        const { list } = resp.body
                        $('#goodsList').html(template('goodsTemplate', { list }))
                    }
                })
            }
            render () {
                // 根据localStorage的数据来渲染
                const cart = localStorage.getItem('cart')
                if (cart) {
                    this.cart = JSON.parse(cart)
                    $('#shop-list').html(template('cartTemplate', { cart: this.cart }))
                } else {
                    // 购物车为空
                    $('#shopping_car').hide()
                    $('#cart-empty').show()
                }
            }
            calcTotalMoney () {
                // 从0算总价，只要以后做了任何对总价有影响的操作，都直接调用这个方法即可
                let totalMoney = this.cart.reduce((total, shop) => {
                    // 只加选中的
                    if (shop.checked) total += shop.acPrice * shop.count
                    return total
                }, 0)
                $('#Paymoney').html(totalMoney.toFixed(2))
            }
            calcTotalNum(){
                let totalNum = this.cart.reduce((total, shop) => {
                    // 只加选中的
                    if (shop.checked) total += shop.count
                    return total
                }, 0)
                $('#Paynum').html(totalNum)
                $('#all-shops').html(totalNum)

            }
            checksChange () {
                const _this = this
                // 单选绑事件
                $('.checks').on('change', function () {
                    // 获取当前数据的id，在父级tr上自定义属性上
                    const id = $(this).parents('li').data('id')
                    // 把当前数据的checkded属性修改为当前选框的状态
                    _this.cart = _this.cart.map(shop => {
                        if (shop.id === id) shop.checked = $(this).prop('checked')
                        return shop
                    })
                    // 把修改之后的cart重新存localStorage
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    // 重新算总价
                    
                    _this.calcTotalMoney()
                    _this.calcTotalNum()
                    _this.setAllCheckStatus()
                })
            }
            setAllCheckStatus () {
                // 设置全选
                const isAllCheck = this.cart.every(shop => shop.checked)
                $('#all-check').prop('checked', isAllCheck)
                $('#all-check2').prop('checked', isAllCheck)
            }
            addbtn(){
                const _this=this
                $('.add').on('click',function(){
                    const id = parseInt($(this).parents('li').data('id'))
                    
                    _this.cart = _this.cart.map(shop => {
                        if(shop.id===id){
                            shop.count++
                        }
                        return shop
                    })
                    // 把修改之后的cart重新存localStorage
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    let count = _this.cart.filter(shop => {
                        return id===shop.id
                    })[0].count
                    let acPrice = _this.cart.filter(shop => {
                        return id===shop.id
                    })[0].acPrice
                    $(this).parents('li').find('.num').html(count)                    
                    $(this).parents('li').find('.l-price').html((acPrice * count).toFixed(2))                    
                    _this.calcTotalMoney()
                    _this.calcTotalNum()
                    _this.setAllCheckStatus()


                // 判断当前数据在购物车里是否已存在
                })
            }
            reduce(){
                const _this=this
                $('.reduce').on('click',function(){
                    const id = parseInt($(this).parents('li').data('id'))
                    
                    _this.cart = _this.cart.map(shop => {
                        if(shop.id===id){
                            shop.count<=1? 1 : shop.count--
                        }
                        return shop
                    })
                    // 把修改之后的cart重新存localStorage
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    let count = _this.cart.filter(shop => {
                        return id===shop.id
                    })[0].count
                    let acPrice = _this.cart.filter(shop => {
                        return id===shop.id
                    })[0].acPrice
                    $(this).parents('li').find('.num').html(count)                    
                    $(this).parents('li').find('.l-price').html((acPrice * count).toFixed(2))                    
                    _this.calcTotalMoney()
                    _this.calcTotalNum()
                    _this.setAllCheckStatus()


                // 判断当前数据在购物车里是否已存在
                })
            }

            delete(){
                const _this=this
                $('.deleteBtn').on('click',function(){
                   if( confirm('确定要删除吗？'))
                    $(this).parents('li').remove()
                })
                let id = parseInt($(this).parents('li').data('id'))
                    _this.cart = _this.cart.filter(shop => {
                        return shop.id != id
                    })
                localStorage.setItem('cart', JSON.stringify(_this.cart))
                _this.setAllCheckStatus()
                if (_this.cart.length === 0) {
                    $('#shopping_car').hide()
                    $('#cart-empty').show()
                    localStorage.removeItem('cart')
                }
            }

            incomplete() {
                const _this = this
                $('#all-check').on('change', function () {
                    $('.checks, #all-check').prop('checked', $(this).prop('checked'))
                    _this.cart = _this.cart.map(shop => {
                        shop.check = $(this).prop('checked')
                        return shop
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    _this.calcTotalMoney ()
                })
            }
        }
        new Shop()
    })
})